<template>
	<view class="goods-box" :style="'height: '+height">
		<!-- <view class="u-text-center u-m-b-20 u-m-t-20"><text class="u-font-32">选择回收物</text></view> -->
		<view class="u-flex u-flex-1" style="align-items: flex-start;">
			<view class="hd u-m-b-30">
				<scroll-view :scroll-y="true" :style="'height: calc('+height+' - 100rpx)'">
					<view style="white-space: nowrap">
						<view class="item" :class="choose==index?'on':''" v-for="(item,index) in LargeTypeList" :key="index"
							@click="getProductList(item.id,index)">
							<u-image width="50rpx" height="50rpx" :src="item.icon" shape="circle" class="img"></u-image>
							<view class="u-p-t-10"><text>{{item.name}}</text></view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bd u-m-30">
				<scroll-view :scroll-y="true" class="u-flex" :style="'height: calc('+height+' - 300rpx)'">
					<view class="lower-level u-p-b-30">
						<view
							v-for="(item,index) in ProductList" :key="index"
							class="item u-m-b-6"
							:class="{'on':item.on}"
							@click="addLowerLevel(item)"
						>
							<view class="name u-m-r-6">
								<text class="u-font-24">{{item.name}}</text>
								<!-- <u-icon name="checkmark-circle" v-if="item.on"></u-icon> -->
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- <view class="u-flex-1"></view> -->
				<view class="u-flex u-border-top u-p-t-30" style="width: 530rpx;" v-if="!single">
					<view style="width: 100rpx;"><text>已选：</text></view>
					<scroll-view :scroll-x="true" class="ischoose" style="width: 430rpx;height:50rpx;white-space: nowrap;">
						<u-tag 
							class="u-m-r-6"
							v-for="(item,index) in chooseType" 
							:key="index"
							:text="item.name" 
							type="primary" 
							mode="plain"
							closeable
							@close="closeTag(item)"
						/>
					</scroll-view>
				</view>
				
				<view class="u-m-t-30 u-m-b-30" v-if="!single">
					<u-button type="primary" @click="confirm" :disabled="disabled">确定</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			orderId: 0,
			details: {},
			isStock: false, //是否根据库存筛选下级分类
			single: false,
			height: {
				type: String,
				default:()=>{
					return '90vh'
				}
			}
		},
		data() {
			return {
				LargeTypeList: [], //类型列表
				ProductList: [], //小类列表
				chooseType: [], //已选择的下级分类
				page: 1,
				pageSize: 999,
				productId: 0,
				confirmForm: {
					orderid: 0,
					details: [
						// {
						// 	id: 0,
						// 	weight: 0,
						// 	price: 0
						// }
					]
				},
				choose: 0,
				disabled: false,
				stockList: []
			}
		},
		created() {
			console.log('createddetails:',this.details)
			// #ifdef H5
			this.confirmForm.details = []
			if(this.details){
				this.chooseType = JSON.parse(JSON.stringify(this.details))
			}
			// #endif
			
			this.init()
		},
		watch:{
			details(value,oldvalue){
				console.log('监听details',value,oldvalue)
				// #ifndef H5
				this.confirmForm.details = []
				this.chooseType = value
				
				this.ProductList.forEach((item, i) => {
					// 对比已选择下级分类
					if(this.chooseType.find(cell=>cell.id == item.id)){
						this.ProductList[i].on = this.chooseType.find(cell=>cell.id == item.id).on
					}else{
						this.ProductList[i].on = false
					}
				})
				// #endif
			}
		},
		methods: {
			init(){
				this.getLargeTypeList().then(() => {
					let firstLargeType = this.LargeTypeList[this.choose]
					this.getProductList(firstLargeType.id, this.choose)
				})
			},
			//获取类型
			getLargeTypeList() {
				let obj = {
					"PageIndex": this.page,
					"PageSize": this.pageSize
				}
				return this.$u.get('/Waste/Type/List', obj).then((res) => {
					this.LargeTypeList = res
					this.LargeTypeList.forEach((item) => {
						item.icon = this.fileURL + item.icon
					})
					return res
				}).catch(() => {
					// this.loading = false
				})
			},
			//获取小类
			getProductList(typeId, index = 0) {
				console.log('chooseType:',this.chooseType)
				let that =this
				this.choose = index
				return this.$u.get(`/Waste/Product/List?typeId=${typeId}`).then((res) => {
					let datas = res.sort((a,b) => a.sort - b.sort)
					datas.forEach((item, i) => {
						item.typeId = typeId
						item.typenames = this.LargeTypeList[this.choose].name
						item.isweighing = this.LargeTypeList[this.choose].isweighing
						item.typeIcon = this.LargeTypeList[this.choose].icon
						
						// 对比已选择下级分类
						if(that.chooseType.find(cell=>cell.id == item.id)){
							datas[i].on = that.chooseType.find(cell=>cell.id == item.id).on
						}else{
							datas[i].on = false
						}
					})

					this.ProductList = datas.filter((item)=>item.usestate == '已启用');
					return datas
					console.log('ProductList:',this.ProductList)
					
				}).then((Product)=>{
					// 是否根据库存筛选小类
					if(this.isStock){
						// let arr = []
						// this.$u.get('/Store/Stock/Get').then((data) => {
						// 	let stockdata = data
						// 	this.stockList = stockdata
							
						// 	Product.forEach((item)=>{
						// 		this.stockList.forEach((cell)=>{
						// 			cell.Product.forEach((con)=>{
						// 				if(cell.id == con.id){
						// 					arr.push(item)
						// 				}
						// 			})
						// 		})
						// 	})
							
						// 	this.ProductList = arr
						// })
					}
					return Product
				}).catch(() => {
					// this.loading = false
				})
			},
			// 选中下级分类
			addLowerLevel(item){
				if(!item.on){
					if(this.single){
						item.on = true
						this.chooseType = [item]
						this.ProductList.forEach((item, i) => {
							// 对比已选择下级分类
							if(this.chooseType.find(cell=>cell.id == item.id)){
								this.ProductList[i].on = this.chooseType.find(cell=>cell.id == item.id).on
							}else{
								this.ProductList[i].on = false
							}
						})
						this.confirm()
					}else{
						this.chooseType.push(item)
						item.on = true
					}
				}else{
					this.ProductList.find((cell)=>cell.id == item.id).on = false
					this.chooseType = this.chooseType.filter((cell)=>cell.id != item.id)
				}
			},
			// 关闭标签
			closeTag(item){
				item.on = false
				this.chooseType = this.chooseType.filter(item=>item.on == true)
				
				let datas = this.ProductList
				datas.forEach((item, i) => {
					// 对比已选择下级分类
					if(this.chooseType.find(cell=>cell.id == item.id)){
						datas[i].on = this.chooseType.find(cell=>cell.id == item.id).on
					}else{
						datas[i].on = false
					}
				})
				
				this.ProductList = datas
			},
			//提交
			confirm() {
				this.confirmForm.orderid = parseInt(this.orderId)
				if(this.single){
					this.confirmForm.details = []
				}
				this.chooseType.forEach((item) => {
					if (item.on) {
						this.confirmForm.details.push(item)
					}
				})
				console.log('确定选择回收物',this.confirmForm)
				this.$emit('confirm', this.confirmForm)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 分拣清算
	.goods-box {
		// padding: 0;
		// padding-top: 10rpx;
		height: 100%;
		overflow: hidden;
		display: flex;
    	flex-direction: column;
		background-color: #fff;

		.hd {
			display: flex;
			background: $u-bg-color;
			margin-bottom: 10rpx;
			width: 160rpx;
			height: 100%;

			.item {
				// flex: 1;
				text-align: center;
				padding: 20rpx 0;
				width: 160rpx;
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// width: 25%;
				// display: inline-block;

				.img {
					display: inline-block;
					background: #fff!important;
				}

				&.on {
					background-color: $u-type-primary;
					color: #fff;
				}
			}
		}

		.bd {
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			.td {
				height: 94rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}

		.err {
			color: $u-type-error;
			border-color: $u-type-error !important;
		}
		
		.lower-level{
			display: flex;
			flex-wrap: wrap;
			// flex: 1;
    		align-content: flex-start;
			
			.item{
				width: 33.33%;
				height: 80rpx;
				.name{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					border: 1px solid $u-border-color;
					color: $u-content-color;
					border-radius: 6rpx;
					text-align: center;
				}
				&.on{
					.name{
						border: 1px solid $u-color-main;
						color: $u-color-main;
						background-color: #10beca1a;
					}
				}
			}
		}
	}
</style>
